/*
 * @desc:
 * @Author: 钟强
 * @Date: 2021-12-10 11:24:49
 * @LastEditors: 钟强
 * @LastEditTime: 2022-01-19 16:45:40
 */
const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}

const Components = require('unplugin-vue-components/webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const AutoImport = require('unplugin-auto-import/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const CompressionPlugin = require('compression-webpack-plugin')
console.log(process.env.NODE_ENV)

const isProduction = process.env.NODE_ENV === 'production'

// {
//   // 检测并压缩js和css文件
//   test: /\.(js|css)$/,
//     // 默认即为gzip，可以不写
//     algorithm: 'gzip',
//       // 压缩选项，可以在node文档中找到所有选项
//       compressionOptions: {
//     level: 1
//   },
//   // 最小压缩体积，单位bytes，默认0
//   threshold: 1600,
//     // 最小压缩效率，ration = 压缩后体积/压缩前体积，只有效率小于这个值的时候才进行压缩，否则不压缩。默认0.8。传1则全部压缩。
//     minRatio: 0.5,
//       // 输出的文件名字，默认即为'[path][base].gz'，其他参数见文档
//       filename: '[path][base].gz',
//         // 是否删除源文件,默认false
//         deleteOriginalAssets: true
// }

const comress = new CompressionPlugin({
  filename: '[path][base].gz',
  algorithm: 'gzip',
  test: /\.(js|css|svg)$/
  // threshold: 10240
  // minRatio: 0.8,
  // deleteOriginalAssets: false
})

const outPlugins = isProduction ? [comress, new BundleAnalyzerPlugin()] : []

const optimizationConfig = {
  splitChunks: {
    // 这里的配置针对所有缓存组
    // chunks: 'async', // 针对所有代码块
    // minSize: 20000, // 最小提取chunk大小
    // // maxSize: 10240,
    // minChunks: 2, // 最小引用次数
    // maxAsyncRequests: 5,
    // maxInitialRequests: 5,
    // automaticNameDelimiter: '~',
    // automaticNameMaxLength: 30,
    // name: true,

    // chunks————>决定要提取那些模块
    // 默认async,  提取异步加载的模块【异步：通过import('xxx')或require(['xxx'],() =>{})加载的模块】
    // initial， 提取同步加载和异步加载模块，若xxx在项目组异步加载也同步加载了，那么会被提取两次，打包到不同文件中【同步：import xxx 或 require('xxx')加载的模块】
    // all,  不管异步加载还是同步加载的模块都提取出来，打包到一个文件中
    chunks: 'initial',
    // minSize————>提取模块的最小值
    // 30000为默认值，压缩前模块大小超过此字节大小的才会提取
    minSize: 30000,
    // maxSize————>提取文件最大值
    // 0为默认，打包生成的文件最大值，超过即分割
    maxSize: 0, // 不限制大小
    // minChunks————>最小提取次数
    // 要提取的模块最少被引入的次数，未达到不提取
    minChunks: 2,
    // maxAsyncRequests————>最大异步加载次数，默认为6
    maxAsyncRequests: 6,
    // maxInitialRequests————>打包的入口文件加载时，还能同时加载的js文件数量(包括入口文件)
    maxInitialRequests: 4,

    /*
      * === cacheGroups ===
      * 配置提取模块的方案。除了以下特有选项，其它选项均与外面一致，有以自己为主，没有应用外部配置
      *
      * test。 匹配要提取的模块的资源路径或名称。值是正则或函数。
      *
      * priority。 方案的优先级，值越大表示提取模块时优先采用此方案。默认值为0
      *
      * reuseExistingChunk。 true/false。为true时，如果当前要提取的模块，在已经在打包生成的js文件中存在，则将重用该模块，而不是把当前要提取的模块打包生成新的js文件。
      *
      * enforce。 true/false。为true时，忽略minSize，minChunks，maxAsyncRequests和maxInitialRequests外面选项
      *
      */
    cacheGroups: {
      common: {
        // 抽取所有入口页面都需要的公共chunk
        name: 'chunk-common',
        chunks: 'initial',
        minChunks: 2,
        maxInitialRequests: 5,
        minSize: 0,
        priority: 1,
        reuseExistingChunk: true,
        enforce: true
      },

      // 将体积较大的包单独分离出来，减少vendor的体积，加快首屏速度
      vendors: {
        name: 'chunk-vendors', // enforce默认为false下不能直接设置name值，否则打包会失败
        test: /[\\/]node_modules[\\/]/,
        priority: -10, // 表示缓存的优先级；
        enforce: true,
        reuseExistingChunk: true
      },
      icons: {
        minChunks: 1,
        name: 'chunk-icons',
        priority: 4,
        test: /[\\/]src[\\/]style[\\/]font/
      },
      vueUI: {
        name: 'vueUI',
        test: /[\\/]node_modules[\\/]vue[\\/]/,
        priority: 4,
        chunks: 'all',
        reuseExistingChunk: true,
        enforce: true
      },
      elementUI: {
        name: 'chunk-element-plus',
        // 最大12KB，这里可以自定义，也可以不加
        // maxSize: 10240,
        // minSize: 1000,
        // 正则表达式来获取node_modules/element-plus/ 下的模块
        test: /[\\/]node_modules[\\/]element-plus[\\/]/,
        // 所有的chunks都被拆分，异步或同步
        chunks: 'all',
        priority: 3,
        reuseExistingChunk: true,
        // 这里会忽略外部的minSize等，但内部的minSize仍然会被遵守
        enforce: true
      },
      styles: {
        name: 'styles',
        test: /\.(sa|sc|c)ss$/,
        chunks: 'all',
        enforce: true
      },
      runtimeChunk: {
        name: 'manifest'
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      }
    }
  },
  minimizer: [ // 文件压缩
    new UglifyJsPlugin({
      test: /\.js(\?.*)?$/i,
      parallel: true,
      uglifyOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true
        }
      }
    })
  ]

}
// https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
module.exports = {
  productionSourceMap: false,
  devServer: {
    // 配置反向代理
    proxy: {
      // 当地址中有/api的时候会触发代理机制
      '/api': {
        // 要代理的服务器地址  这里不用写 api
        target: 'http://49.234.149.141',
        changeOrigin: true // 是否跨域
      }
    }
  },
  chainWebpack (config) {
    // 设置 svg-sprite-loader
    config.module.rule('svg').exclude.add(resolve('src/icons')).end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    // 预加载Prefetch用于标记浏览器页面加载完成后利用空闲时间加载的内容
    // Preload用于标记页面加载后即将用到的资源
    config.plugins.delete('prefetch')
  },
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      }),
      ...outPlugins
    ],
    optimization: isProduction ? optimizationConfig : {}
  }
}
